<template>
    <!--表格显示列界面-->
    <el-dialog title="表格显示列" width="40%" :visible.sync="dialogVisible" :close-on-click-modal="false">
        <el-table ref="fitlerTable" :data="columns" height="330px" tooltip-effect="dark" header-align="left"
                  align="left"
                  :size="size" style="width: 100%" @selection-change="selectionChange">
            <el-table-column type="selection" width="40">
            </el-table-column>
            <el-table-column label="属性">
                <template slot-scope="scope">{{ scope.row.prop }}</template>
            </el-table-column>
            <el-table-column label="列名">
                <template slot-scope="scope">
                    <el-input :size="size" v-model="scope.row.label"></el-input>
                </template>
            </el-table-column>
            <el-table-column label="最小宽度">
                <template slot-scope="scope">
                    <el-input :size="size" v-model="scope.row.minWidth"></el-input>
                </template>
            </el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
            <el-button :size="size" @click.native="dialogVisible = false">{{$t('action.cancel')}}</el-button>
            <el-button :size="size" type="primary" @click.native="handleFilterColumns">{{$t('action.comfirm')}}
            </el-button>
        </div>
    </el-dialog>
</template>

<script>
  export default {
    name: 'TableColumnFilterDialog',
    components: {},
    props: {
      columns: {
        type: Array,
        default: []
      },
      size: {
        type: String,
        default: 'mini'
      }
    },
    data () {
      return {
        selections: [],  // 列表选中列
        dialogVisible: false
      }
    },
    methods: {
      // 选择切换
      selectionChange: function (selections) {
        this.selections = selections

      },
      // 设置可见性
      setDialogVisible: function (visible) {
        this.dialogVisible = visible
      },
      // 处理表格列过滤显示
      handleFilterColumns: function () {
        let filterColumns = []
        for (let i = 0; i < this.columns.length; i++) {
          let column = this.columns[i]
          if (this.hasColumn(column)) {
            filterColumns.push(column)
          }
        }
        this.$emit('handleFilterColumns', {filterColumns: JSON.parse(JSON.stringify(filterColumns))})
      },
      hasColumn: function (column) {
        for (let i = 0; i < this.selections.length; i++) {
          let col = this.selections[i]
          if (column.prop == col.prop) {
            return true
          }
        }
        return false
      }
    },
    mounted () {
    }
  }
</script>

<style scoped>

</style>
